<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>品类品牌销量数量统计</title>
</head>
<body>
<!--查询条件框-->
<form class="layui-form" action="" style="padding-top: 20px;" id="mscodeConForm">
</form>

<!--按钮框-->
<div class="layui-row">
  <div class="layui-col-xs12" id="mscodeBtnForm" style="margin-left: 40px;margin-bottom: 15px;">
  </div>
</div>

<!--列表-->
<!--<table class="layui-hide" id="msmTable"></table>-->

<!--列表-->
<div id="mscodeRptDiv" style="width: 100%;height: 800px;">
</div>


<!-- 你的 HTML 代码 -->
<script>
  layui.use(['http', 'shopx', 'form', 'pub', 'table'], function () {
    var http = layui.http
            , shopx = layui.shopx
            , form = layui.form
            , pub = layui.pub
            , table = layui.table
            , $ = layui.$;

    var prefix = "mscode";
    var elements = {
      name: prefix,
      controlName: 'materialSale',
      //页面元素前缀，按配置，施工等模块定义
      prefix: 'cm10',
      //page标题
      title: "品类品牌销售统计",
      //查询列表接口
      qryUrl: '',
      //查询条件
      conName: 'mscodeConForm',
      //按钮
      btnName: 'mscodeBtnForm',
      //表格id
      tableName: 'mscodeTable',
      //表主键
      keyId: '',
      //排序
      orderBy: "",
      //默认初始化查询条件
      addModel: {
        // dictCode:"DEDUCTION_FLAG"
      },
      //查询条件 label#id#类型
      //注意：如果类型是dict 则用:分割 [0]是id [1]是dictCode,[2]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
      //注意：如果类型是sel 则用:分割 [0]是id [1]是类型（t1：普通下拉框；t2:搜索下拉框；t3:多选搜索下拉框）
      conArray: [
        "开始时间|billBegDate:billEndDate:d2|RDT",
        "品类|subCostSpecialCode:t3|SEL|Y",
        "组织机构|orgCode:t2|SEL"
      ],
      //按钮 id#名称#类型#图标#是否权限控制
      btnArray: [
        prefix + 'QryBtn|查询|primary|&#xe615;|N'
      ],
      //表格列
      cols: [[
        , {field: 'regionName', title: '大区', fixed: 'left'}
        , {field: 'orgName', title: '公司名称', fixed: 'left'}
        , {field: 'materialClassName', title: '材料分类', fixed: 'left'}
        , {field: 'supplyName', title: '供货商', fixed: 'left'}
        , {field: 'supplyNewName', title: '转换供货商', fixed: 'left'}
        , {field: 'materialName', title: '材料名称', fixed: 'left'}
        , {field: 'stockNum', title: '销量', fixed: 'left'}
      ]]
    }
    var page = shopx.genPage(elements);
    //展示菜单
    shopx.genCond(page);
    //展示按钮
    shopx.genBtn(page);
    //展示有权限的按钮
    shopx.eleAuthShow(http.getUserFunc());
    // http.initPage(page);
    //2、部门渲染
    http.qryOrgList({}, "q_cm10_orgCode");

    var arry=[
      { "subCostSpecialCode": "YC01", "subCostSpecialCodeName": "地板" },
      { "subCostSpecialCode": "YC02", "subCostSpecialCodeName": "卫浴" },
      { "subCostSpecialCode": "YC03", "subCostSpecialCodeName": "门" },
      { "subCostSpecialCode": "YC04", "subCostSpecialCodeName": "灯具" },
      { "subCostSpecialCode": "YC05", "subCostSpecialCodeName": "砖" },
      { "subCostSpecialCode": "YC06", "subCostSpecialCodeName": "橱柜" },
      { "subCostSpecialCode": "YC07", "subCostSpecialCodeName": "扣板" },
      { "subCostSpecialCode": "YC08", "subCostSpecialCodeName": "电器" },
      { "subCostSpecialCode": "YC08", "subCostSpecialCodeName": "电器代购" },
      { "subCostSpecialCode": "YC09", "subCostSpecialCodeName": "开关" },
      { "subCostSpecialCode": "YC10", "subCostSpecialCodeName": "大理石" },
      { "subCostSpecialCode": "YC11", "subCostSpecialCodeName": "定制柜" },
      { "subCostSpecialCode": "YC12", "subCostSpecialCodeName": "窗帘" },
      { "subCostSpecialCode": "YC13", "subCostSpecialCodeName": "物流" },
      { "subCostSpecialCode": "YC14", "subCostSpecialCodeName": "家私" },
      { "subCostSpecialCode": "YC15", "subCostSpecialCodeName": "墙布/墙纸" },
      { "subCostSpecialCode": "YC16", "subCostSpecialCodeName": "水槽" },
      { "subCostSpecialCode": "YC17", "subCostSpecialCodeName": "智能家居" },
      { "subCostSpecialCode": "YC18", "subCostSpecialCodeName": "地漏" },
      { "subCostSpecialCode": "YC19", "subCostSpecialCodeName": "门窗" },
      { "subCostSpecialCode": "YC20", "subCostSpecialCodeName": "美缝" },
      { "subCostSpecialCode": "YD01", "subCostSpecialCodeName": "零星-成品保护-开工保护-完工保洁" },
      { "subCostSpecialCode": "YD01", "subCostSpecialCodeName": "零星-成品保护-环保检测" },
      { "subCostSpecialCode": "YD02", "subCostSpecialCodeName": "第一阶段-水电" },
      { "subCostSpecialCode": "YD03", "subCostSpecialCodeName": "第二阶段-回填/防水" },
      { "subCostSpecialCode": "YD04", "subCostSpecialCodeName": "第三阶段-板材" },
      { "subCostSpecialCode": "YD05", "subCostSpecialCodeName": "第四阶段-乳胶漆" },
      { "subCostSpecialCode": "YD05", "subCostSpecialCodeName": "第四阶段-油漆" },
      { "subCostSpecialCode": "YD05", "subCostSpecialCodeName": "第四阶段-硅藻泥" },
      { "subCostSpecialCode": "YD06", "subCostSpecialCodeName": "第五阶段-包管" },
      { "subCostSpecialCode": "YD06", "subCostSpecialCodeName": "第五阶段-水泥沙" },
      { "subCostSpecialCode": "YD07", "subCostSpecialCodeName": "第四阶段-腻子粉" },
      { "subCostSpecialCode": "YD99", "subCostSpecialCodeName": "辅材其他-代购" },
      { "subCostSpecialCode": "YD99", "subCostSpecialCodeName": "辅材其他-虚拟材料商" },
      { "subCostSpecialCode": "YC98", "subCostSpecialCodeName": "其他赠品" },
      { "subCostSpecialCode": "YC99", "subCostSpecialCodeName": "主、辅材其他" }
    ];

    $("#q_cm10_subCostSpecialCode").html('<option value="">请选择</option>');
    $(arry).each(function (idx, item) {
      $("#q_cm10_subCostSpecialCode").append('<option value="'+item.subCostSpecialCode+'">'+item.subCostSpecialCodeName+'</option>');
    });
    form.render();
    // layui.element.on('tab(msmTab)', function(data){
    //   showEchart(data.index);
    // });
    //品类渲染
    // showEchart();
    //自定义按钮查询
    $('#b_cm10_mscodeQryBtn').click(function () {
      showEchart();
    });


  });

  function showEchart(){

    var qryModel = layui.pub.getFormObject('mscodeConForm', 'q_cm10_');
    console.info(JSON.stringify(qryModel));
    var item = document.getElementById("mscodeRptDiv");
    var myChart = echarts.init(item);

    layui.http.postRequest("/cmSaleDetail/querySalesListByCode", 'POST', qryModel, function suc(data) {
      var option = {
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '50%',
            data: data.rspData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      myChart.resize();
    }, null, false, false);
  }




</script>
</body>
</html>